<template>
  <div class="container2">

<div class="conchange">

  <div class="spans">
<div class="span">旧密码</div>
<div class="span">新密码</div>
<div class="span">确认密码</div>
</div>

<div class="inputs">
<div> <el-input class="input" v-model="oldPasswd" type="password" placeholder="Please input" />
  </div>
  <div>
    <el-input class="input" v-model="newPasswd"  type="password" placeholder="Please input" />
  </div>
  <div>
    <el-input class="input" v-model="repeatPasswd" type="password" placeholder="Please input" />
  </div>
</div>

</div>
<div style="display: flex; justify-content: right;">
  <el-popconfirm @confirm="changePasswd()" title="确认修改？">
      <template #reference>
        <el-button type="success" :icon="Check"></el-button>
      </template>
    </el-popconfirm>

</div>

</div>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import { changeAddrApi, changeNameApi, changeNumberApi, changePasswdApi, changeRealNameApi } from '@/api/User';
import { ElMessage } from 'element-plus';
import {
  Check
} from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore()
const oldPasswd = ref()
const newPasswd = ref()
const repeatPasswd = ref()






const changePasswd = () => {
  if(newPasswd.value !== repeatPasswd.value) {
    ElMessage({
      message:'两次输入不一样',
      type: 'error'
    })
    return
  }
  changePasswdApi({
    userName:store.getUser()?.userName,
    newPasswd:repeatPasswd.value,
    oldPasswd:oldPasswd.value
  }).then(res => {
    if( res.data.code === 200) {
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
    }else {
      ElMessage({
        message: res.data.data,
        type: 'error'
      })
    }
  })

}
</script>

<style scoped >
.input {
  width: 400px;

}
.container{
  display: flex;
  flex-direction: row;
  height: 300px;
  width: 800px;
  border-radius: 10px;
  box-shadow: 0 6px 20px 0 rgba(37, 43, 50, .07);
}
.span {

}
.spans{
  display: flex;
flex-direction: column;
justify-content:space-around;
}
.inputs {
  display: flex;
flex-direction: column;
justify-content:space-around;
}

.container2 {
  height: 300px;
  width: 600px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 20px 0 rgba(37, 43, 50, .07);
}
.conchange{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 265px;
  width: 600px;

}
</style>